<template>
  <div class="container" style="margin:auto">
      <div v-for="item in arr" :key="item">
       <input type="checkbox" v-model="item.checked"><span>{{item.fruit}}-</span><span>{{item.price}}</span><button @click="item.inp1--">-</button> <input type="number" min=0 value="1" v-model="item.inp1"><button @click="item.inp1++">+</button><br />
    </div><br/><br/>
     全选<input type="checkbox" id="qx" @click="quan" v-model="qx">
     <!-- 反选<input type="checkbox" id="qx" @click="fan">
     不全选<input type="checkbox" id="qx" @click="no"> -->

     <button id="btn" @click="jiesuan">结算</button>
    <h3>总价:<span id="spa">{{total}}</span></h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
        arr:[
            {
                fruit:"苹果",
                price:10,
                inp1:1,
                checked:false
            },
            {
                fruit:"香梨",
                price:15,
                inp1:1,
                checked:false
            },
            {
                fruit:"荔枝",
                price:26,
                inp1:1,
                checked:false
            },
            {
                fruit:"哈密瓜",
                price:17,
                inp1:1,
                checked:false

            },
         ],
     total:0,
     qx:false
        
    }
  },
  methods:{
      jiesuan(){
        var newArr=this.arr.filter(function(val){
                return val.checked===true;
            })
            var Price1=0;
            
            for(var i=0;i<newArr.length;i++){
                Price1+=newArr[i].price*newArr[i].inp1
            }
            console.log(Price1)
            this.total = Price1.toFixed(2)
      },
      quan:function(){
           this.arr.forEach(item => {
          item.checked =!this.qx;
        });
      },
    //   fan(){
    //        this.arr.forEach(item => {
    //       item.checked = !item.checked;
    //     });
    //   },
    //   no:function(){
    //       this.arr.forEach(item => {
    //       item.checked = false;
    //   });
    //   },
    // reduce(){
    //   if()
    // },
    // add(){

    // }

  }
}
</script>

<style scoped>

</style>
